<template>
    <div id="box">
        <el-card>
            <div slot="header">
                <span>支付</span>
            </div>
            <div>
                <el-form ref="form" :model="payForm" label-width="600px">
                    <el-form-item label="订单编号: ">
                        <span>
                            ORS{{ payForm.orderId }}20
                        </span>
                    </el-form-item>
                    <el-form-item label="支付金额: ">
                        <span>
                            {{ payForm.money }} 元
                        </span>
                    </el-form-item>
                    <el-form-item>
                        <div style="margin-left: -70px">
                            <el-radio-group v-model="payMethod">
                                <el-radio :label="aliPay" border size="medium">支付宝</el-radio>
                                <el-radio :label="balance" border size="medium">余额支付</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="margin-left: 80px" type="primary" @click="payment">立即支付</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
    import $ from "jquery"
    export default {
        name: "Pay",
        data() {
            return {
                // 支付表单
                payForm: {
                    "orderId": this.$route.params.orderId,
                    "money": this.$route.params.money,
                    "payoffId": this.$route.params.payoffId,
                },
                // 支付方式
                payMethod: 1,
                // 支付宝
                aliPay: 1,
                // 钱包余额支付
                balance: 2,
                // 账户余额
                accountMoney: null,
                // 记录跳转秒数
                second: 3,
                // 记录定时器ID
                timerId: null
            }
        },
        mounted() {
            this.getBalance();
        },
        methods: {
            // 支付
            payment() {
                let that = this;
                // 判断支付方式
                if (this.payMethod === this.aliPay) {
                    let money;
                    // 支付宝支付若金额为零会报错
                    money = that.payForm.money === "0" ? 0.01 : that.payForm.money;
                    // 跳转支付宝支付
                    that.$router.push("/aliPay" + that.payForm.orderId + "/" + money + "/" + that.payForm.payoffId);
                    return;
                }
                // 判断余额是否足够
                if (that.accountMoney < that.payForm.money) {
                    that.$message.warning("余额不足");
                    return;
                }
                // 根据是否为取消订单动态生成url后缀
                let urlSuffix = that.payForm.payoffId === "0" ? "payment/cancelOrderAccounts" : "payment/settleAccounts";
                // 发送支付请求
                $.ajax({
                    url: IP_ADDR + urlSuffix,
                    type: "POST",
                    headers: {
                        "Access-Token": sessionStorage.getItem(ACCESS_TOKEN)
                    },
                    data: that.payForm,
                    success() {
                        // 支付成功，跳转到订单页面
                        $("#box").html("<div style='margin-left: 45%;margin-top: 200px'><h1>支付成功, <span id='timer'>3</span> 秒后跳转......</h1></div>");
                        that.timerId = setInterval(that.redirect, 1000);
                    },
                    error(r) {
                        that.$message.error(r.responseJSON.message);
                    }
                });
            },
            // 查询余额
            getBalance() {
                let that = this;
                $.ajax({
                    url: IP_ADDR + "account/getBalance",
                    headers: {
                        "Access-Token": sessionStorage.getItem(ACCESS_TOKEN)
                    },
                    success(r) {
                        that.accountMoney = r.res;
                    },
                    error(r) {
                        that.$message.error(r.responseJSON.message);
                    }
                });
            },
            // 定时跳转页面
            redirect() {
                if (this.second < 0) {
                    // 销毁定时器
                    clearInterval(this.timerId);
                    // 跳转到订单页面
                    this.$router.push("/order");
                } else {
                    $("#timer").text(this.second--);
                }
            }
        }
    }
</script>

<style scoped>
</style>